<template>
    <div class="appointmentDetail">
        <div class="topBg">
            <van-nav-bar title="商机预约">
                <template #left>
                    <div class="headerLeftBtn">
                        <van-icon @click="$router.push('/home')" size=".48rem" color="#ffffff" name="arrow-left" />
                        <van-icon @click="$router.push('/home')" size=".48rem" color="#ffffff" name="cross" style="margin-left: .15rem;" />  
                    </div>
                </template>
            </van-nav-bar>
        </div>
        <div class="content">
            <div class="imgBox">
                <div class="formQuery" style="height: 1.7rem; overflow: hidden;">
                    <h6 style="font-size: .4rem; padding-left: .3rem;font-weight: normal;padding-top: .3rem;">产品名称</h6>
                    <van-form>
                        <van-field style="padding: 0; padding-left: .3rem;" v-model="queryForm.name1" placeholder="请输入产品名称"/>
                    </van-form>
                </div>
            </div>
            <div class="formQuery" style="margin-top: .2rem;">
                <h2>企业信息</h2>
                <van-form>
                    <van-field v-model="queryForm.name" name="企业名称" label="企业名称" placeholder="请输入企业名称"/>
                    <van-field v-model="queryForm.phone" maxlength="11" name="手机号" label="手机号" placeholder="请输入手机号"/>
                    <van-field v-model="queryForm.code" maxlength="6" name="短信验证码" label="短信验证码" placeholder="请输入短信验证码">
                        <template #button>
                            <van-button v-if="showFlagCode" plain size="small" type="info" @click="sendCode">发送验证码</van-button>
                            <van-count-down v-else :time="time" format="ss" @finish="finish">
                                <template #default="timeData">
                                    <span class="block">{{ timeData.seconds }}s</span>
                                </template>
                            </van-count-down>
                        </template>
                    </van-field>
                    <van-field v-model="queryForm.address" name="picker" label="所在省份" clickable is-link readonly placeholder="请输入" @click="queryForm.addressFlag = true"/>
                    <van-popup v-model="queryForm.addressFlag" position="bottom">
                        <van-area
                            :area-list="areaList"
                            @confirm="onConfirmpAddressFlag"
                            @cancel="queryForm.addressFlag = false"
                        />
                    </van-popup>
                    <van-field v-model="queryForm.detailAddress" name="详细地址" label="详细地址" placeholder="请输入"/>
                </van-form>
            </div>
            <div class="btns">
                <van-button round block type="default" @click="resetForm">取消</van-button>
                <van-button round block type="info" @click="searchQuery">意向下单</van-button>
            </div>
        </div>
    </div>
</template>
<script>
import { areaList } from '@vant/area-data';
export default {
    name: 'appointmentDetail',
    data() {
        return {
            areaList,
            showFlagCode: true,
            time: 60 * 1000,
            queryForm: {
                addressFlag: false
            }
        }
    },
    methods: {
        sendCode() {
            this.showFlagCode = false
        },
        finish() {
            this.showFlagCode = true
            this.time = 60 * 1000
        },
        onConfirmpAddressFlag(values) {
            this.queryForm.address = values
                .filter((item) => !!item)
                .map((item) => item.name)
                .join('/');
            this.queryForm.addressFlag = false
        },
        resetForm() {
            this.$router.go(-1)
        },
        searchQuery() {
            this.$router.push('/home')
        },
    },
}
</script>
<style lang="less" scoped>
.content {
    .imgBox {
        margin-top: -2.7rem;
        img {
            width: 6.9rem;
            margin-left: .3rem;
        }
    }
    .formQuery {
        margin-left: .3rem;
        width: 6.9rem;
        background: #FFFFFF;
        border-radius: 0.3rem;
        h2 {
            font-weight: normal;
            font-size: 0.4rem;
            color: #000000;
            text-align: left;
            font-style: normal;
            padding-top: .4rem;
            padding-left: .3rem;
        }
        .van-form {
            padding-top: .2rem;
        }
    }
    .btns {
        margin-left: .3rem;
        width: 6.9rem;
        display: flex;
        justify-content: space-between;
        margin-top: .4rem;
        button {
            width: 3.14rem;
            height: .72rem;
            border-radius: 0.2rem;
            font-size: 0.32rem;
            &:first-child {
                background: #E9F4FF;
                color: #2892FF;
                border: 0 !important;
            }
        }
    }
}
</style>

